<template>
  <main v-if="!isUniFrameWork" class="notification">
    <textarea v-if="isEdit" v-model="input" class="textarea" @keyup.enter="updateProfile" />
    <section v-else>
      <p v-if="!groupProfile.notification">
        {{ TUITranslateService.t(`TUIGroup.暂无公告`) }}
      </p>
      <article v-else>
        {{ groupProfile.notification }}
      </article>
    </section>
    <footer v-if="isAuthorNotification">
      <button v-if="isEdit" class="btn" @click="updateProfile">
        {{ TUITranslateService.t(`TUIGroup.发布`) }}
      </button>
      <button v-else class="btn" @click="isEdit = !isEdit">
        {{ TUITranslateService.t(`TUIGroup.编辑`) }}
      </button>
    </footer>
  </main>
  <div v-else class="edit-h5">
    <main class="edit-h5-main">
      <view class="tit">
        {{ TUITranslateService.t(`TUIGroup.群公告`) }}
        <span class="close" @click="close('notification')">{{
          TUITranslateService.t(`关闭`)
        }}</span>
      </view>

      <div class="notification">
        <textarea v-if="isEdit" v-model="input" :class="[isUniFrameWork ? 'uni-height' : '', 'textarea']"
          @keyup.enter="updateProfile" />
        <section v-else class="row">
          <article v-if="!groupProfile.notification" class="row-p">-</article>
          <article v-else>
            {{ groupProfile.notification }}
          </article>
        </section>
        <footer v-if="isAuthorNotification" class="footer">
          <button v-if="isEdit" class="zxb-btn" @click="updateProfile">
            {{ TUITranslateService.t(`TUIGroup.发布`) }}
          </button>
          <button v-else class="zxb-btn" @click="isEdit = !isEdit">
            {{ TUITranslateService.t(`TUIGroup.编辑`) }}
          </button>
        </footer>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick } from '../../../adapter-vue';
  import {
    TUITranslateService,
    IGroupModel,
  } from '@tencentcloud/chat-uikit-engine';
  import { watchEffect, ref } from '../../../adapter-vue';
  import { Toast, TOAST_TYPE } from '../../common/Toast/index';
  import { isUniFrameWork } from '../../../utils/env';

  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    isAuthor: {
      type: Boolean,
      default: false,
    },
  });

  const groupProfile = ref<IGroupModel>({});
  const input = ref('');
  const isAuthorNotification = ref(false);
  const isEdit = ref(false);

  watchEffect(() => {
    groupProfile.value = props.data;
    input.value = groupProfile.value.notification;
    isAuthorNotification.value = props.isAuthor;
  });

  const emits = defineEmits(['update', 'close']);

  // 更新群资料
  const updateProfile = () => {
    if (input.value.length > 150) {
      Toast({
        message: TUITranslateService.t('TUIGroup.群公告字数超出限制，最大长度为150'),
        type: TOAST_TYPE.ERROR,
      });
      return;
    }
    if (input.value && input.value !== groupProfile.value.notification) {
      emits('update', { key: 'notification', value: input.value });
      nextTick(() => {
        input.value = '';
      });
    }
    isEdit.value = !isEdit.value;
  };

  const close = (tabName : string) => {
    emits('close', tabName);
  };
</script>

<style lang="scss" scoped>
  @import "../../../assets/styles/common";
  .zxb-btn{width: 100%; height: 80rpx; background-color: #151515; color:#fff; font-size: 30rpx; margin: 40rpx 0 60rpx; display: flex; align-items: center; justify-content: center; border-radius: 50rpx;}
  .tit {
    font-size: 34rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
  }

  .close {
    font-size: 28rpx;
    color: #999;
    font-weight: normal;
  }

  .notification {
    flex: 1;
    padding: 20rpx 0;
    display: flex;
    flex-direction: column;
    word-break: break-all;

    .row {
      flex: 1;
      font-size: 14px;

      .row-p {
        text-align: center;
        padding-bottom: 20rpx;
      }
    }

    .textarea {
      margin-bottom: 20rpx;
      box-sizing: border-box;
      padding: 10rpx;
      border: 1px solid #ededed;
      resize: none;
      font-size: 14px;
      height: 100%; width: 100%; display: block;
    }

    .uni-height {
      height: 20vh;
    }

    .footer {
      display: flex;
      justify-content: flex-end;
      padding: 20rpx 0;
    }
  }

  .btn {
    background: #151515;
    border: 0 solid #2f80ed;
    padding: 4px 28px;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    line-height: 24px;
    border-radius: 4px;

    &-cancel {
      background: #fff;
      border: 1px solid #ddd;
      color: #828282;
    }
  }

  .edit-h5 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    z-index: 1;

    .edit-h5-main {
      background: #fff;
      flex: 1;
      padding: 18px;
      border-radius: 12px 12px 0 0;
      width: 80vw;
    }

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .close {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 18px;
        color: #151515;
        letter-spacing: 0;
        line-height: 27px;
      }
    }

    &-footer {
      display: flex;

      .btn {
        flex: 1;
        border: none;
        background: #147aff;
        border-radius: 5px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 16px;
        color: #fff;
        letter-spacing: 0;
        line-height: 27px;
        padding: 8px 0;

        &:disabled {
          opacity: 0.3;
        }
      }
    }
  }
</style>